<template>
  <div class="mes_tree task_tree task_list" :class="{'tree_close': treeClose, 'no_toggle': !isShowToggle}">
    <!--<tree-flod-btn @toggleTree="toggleTree" v-if="isShowToggle"></tree-flod-btn>-->
    <el-container v-show="!treeClose">
      <el-header height="unset">
        <el-form @submit.native.prevent>
          <el-input
            size="small"
            placeholder="请输入任务号"
            v-model.trim="keyword"
            clearable>
            <el-button
              size="mini"
              slot="append"
              icon="el-icon-search"
              native-type="submit"
              @click="handleSearch"
            ></el-button>
          </el-input>
        </el-form>
      </el-header>
      <el-main v-loading="isLoading">
        <el-scrollbar ref="scrollbar">
          <!--<div class="search_empty" v-if="taskList.length === 0">
            <img width="120" src="@/assets/img/pic_default_empt_search.png" alt="">
            <p class="no_data">暂无数据</p>
          </div>-->
          <div class="search_empty" v-if="taskList.length === 0&&!isLoading">
            <img width="120" src="@/assets/img/pic_default_empt_search.png" alt="">
            <p class="no_data">暂无数据</p>
          </div>
          <el-tree
            v-else
            :default-checked-keys="defaultExpandedKeys"
            :highlight-current="true"
            :expand-on-click-node="false"
            node-key="label"
            class="filter-tree"
            :data="taskList"
            :props="defaultProps"
            default-expand-all
            @node-click="handleNodeClick"
            ref="elTree">
            <div
              slot-scope="{ node, data }">
              <span class="el-tree-node__label">
                {{node.label}}<span v-if="node.level === 2">/{{data.product}}</span>
              </span>
            </div>
          </el-tree>
        </el-scrollbar>
      </el-main>
    </el-container>
  </div>
</template>

<script>
import TreeFlodBtn from '../../TreeFlodBtn'
import TreeService from '../TreeService'

export default {
  name: 'TaskNumberTree',
  mixins: [TreeService],
  components: {
    TreeFlodBtn
  },
  props: {
    isShowToggle: {
      type: Boolean,
      defaultProps: true
    }
  },
  data() {
    return {
      isLoading: false, // 是否加载
      taskList: [], // 任务树列表
      treeClose: false, // 树关闭状态
      defaultProps: {
        children: 'children',
        label: 'label'
      },
      keyword: '', // 搜索关键词
      defaultExpandedKeys: [], // 默认展开节点
      treeClientHeight: 0, // 树形盒子clientHeight
    }
  },
  methods: {
    // 获取任务列表
    init() {
      this.initTaskNumberTree()
    },
    // 初始化任务号树，并将任务号展开
    async initTaskNumberTree() {
      this.taskList = await this.getTaskNumberTree()
      this.defaultExpandedKeys = this.taskList.reduce((pre, cur) => [...pre, cur.label], [])
      const defaultCheckedKey = this.taskList[0].children[0].label
      this.setCheck(defaultCheckedKey)
      this.$emit('selectNode', defaultCheckedKey)
    },
    // 设置默认选中
    setCheck(key) {
      this.$nextTick(() => {
        this.$refs.elTree.setCurrentKey(key)
      })
    },
    // 任务号搜索---照用elTree组件方法
    handleSearch() {
      if (this.keyword === '') return
      let nodesMap = this.$refs.elTree.store.nodesMap
      if (!nodesMap.hasOwnProperty(this.keyword)) {
        return this.$message.error({
          message: '未搜索到该任务号',
          duration: 1500,
          center: true
        })
      }
      let node = nodesMap[this.keyword.toUpperCase()]
      // level = 2的是任务号
      if (node.level !== 2) {
        return this.$message.error({
          message: '未搜索到该任务号',
          duration: 1500,
          center: true
        })
      }
      // 设置高亮并展开任务号的父节点
      this.$refs.elTree.setCurrentNode(node)
      node.parent.expanded = true
      let timer = setInterval(() => {
        let elLabelList = this.$refs.elTree.$el.getElementsByClassName('el-tree-node__label')
        let el = Array.from(elLabelList).find(label => {
          return label.innerText.split('/')[0] === this.keyword.toUpperCase()
        })
        let clientHeight = this.$refs.elTree.$el.clientHeight
        if (this.treeClientHeight === clientHeight) {
          this.$nextTick(() => {
            this.$refs.scrollbar.$refs.wrap.scrollTop = el.offsetTop - 4
          })
          return clearInterval(timer)
        }
        this.treeClientHeight = clientHeight
      }, 50)
      this.$emit('selectNode', this.keyword.toUpperCase())
    },
    // 节点点击
    handleNodeClick(data, node) {
      if (node.level === 2) {
        this.$emit('selectNode', data.label)
      }
    },
    // 按钮toggle
    toggleTree(value) {
      this.treeClose = value
      this.$emit('toggleList')
    }
  }
}
</script>

<style lang="less">
  .task_list{
    &.no_toggle{
      border-right: 1px solid #dbe1e8;
    }
  }
  .task_tree_container {
    display: flex;
    overflow-x: hidden;
    height: calc(100% - 56px);
    .mes_tree.task_tree {
      position: relative;
      flex: 0 0 350px;
      &.tree_close {
        flex: 0 0 0;
        width: 16px;
        .flod_panel {
          left: 0;
        }
      }
    }
    .task_tree_content {
      flex: 1;
      overflow-x: auto;
    }
  }
</style>
